<script setup lang="ts">
import { computed, ref, watch } from 'vue'

// 定义水果对象的类型
interface Fruit {
  id: number
  icon: string
  isChecked: boolean
  num: number
  price: number
}

// 水果列表
// 读取数据
// 存在 设置给fruitList
// 不存在 设置默认值
const saveList = localStorage.getItem('fruits')
let fruitList = ref<Fruit[]>([])
if (saveList == null) {
  // 设置初始值
  fruitList.value = [
    {
      id: 1,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png',
      isChecked: true,
      num: 2,
      price: 6
    },
    {
      id: 2,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png',
      isChecked: false,
      num: 7,
      price: 20
    },
    {
      id: 3,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/tg.png',
      isChecked: false,
      num: 3,
      price: 40
    },
    {
      id: 4,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/xg.png',
      isChecked: true,
      num: 10,
      price: 3
    },
    {
      id: 5,
      icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/yl.png',
      isChecked: false,
      num: 20,
      price: 34
    }
  ]
} else {
  // 不为空
  const res = JSON.parse(saveList)
  if (res.length == 0) {
    fruitList.value = [
      {
        id: 1,
        icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/ll.png',
        isChecked: true,
        num: 2,
        price: 6
      },
      {
        id: 2,
        icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/smt.png',
        isChecked: false,
        num: 7,
        price: 20
      },
      {
        id: 3,
        icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/tg.png',
        isChecked: false,
        num: 3,
        price: 40
      },
      {
        id: 4,
        icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/xg.png',
        isChecked: true,
        num: 10,
        price: 3
      },
      {
        id: 5,
        icon: 'https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/yl.png',
        isChecked: false,
        num: 20,
        price: 34
      }
    ]
  } else {
    fruitList.value = res
  }
}

//累加
const addNum=(id:number)=>{
  const item=fruitList.value.find((item)=>item.id==id)
  // item 有值，再解析表达式 2
  item && item.num++ 
}

//递减
const decreaseNum =(id:number)=>{
  const item=fruitList.value.find((item)=>item.id ==id)
  if(item){
   item.num>1&&item.num--
  }
}

// 删除
const deleteItem = (id: number) => {
  // 把 id 不相同的元素保留，相同的就被删掉了
  fruitList.value = fruitList.value.filter((item) => item.id != id)
}

// 是否全部被选中 get 的简写形式--计算属性
// const isCheckAll=computed(()=>fruitList.value.every((item)=>item.isChecked))
const isCheckAll=computed({
  // 获取选中状态
  get(){
    return fruitList.value.every((item)=>item.isChecked)
  },

  // 点击全选，挨个设置每一项
  set(newValue) {
     // 获取到最新的全选状态
    // 挨个设置给每一项
    // console.log(newValue)
    fruitList.value.forEach((item)=>(item.isChecked=newValue))
  }
})

// 总个数
const totalCount = computed(() => {
  // 链式编程
  // return fruitList.value
  //   .filter((item) => item.isChecked) // 筛选-[]
  //   .reduce((prev, item) => prev + item.num, 0)

  // 筛选出符合条件的元素
  // 最完整，可读性最高，逼格降低了
  const filterRes = fruitList.value.filter((item) => {
    if (item.isChecked == true) {
      return true
    } else {
      return false
    }
  })

  // 求和
  // prev:
  // 第一次：初始值 0
  // 第二次: 2 = 2+0 (上一次的累加值设置给 prev)
  // 第三次: 9 = 2+7

  const res = filterRes.reduce((prev, item) => {
    // console.log('prev:', prev)
    return item.num + prev
  }, 0)

  // console.log(filterRes)

  // 基于筛选出来的元素 计算结果
  return res
})

// 总价格
const totalPrice = computed(() => {
  // 链式编程
  return fruitList.value
    .filter((item) => item.isChecked) // 筛选-[]
    .reduce((prev, item) => prev + item.num * item.price, 0)
})

// 数据改变保存到缓存中
// 嵌套属性默认无法检测
watch(
  fruitList,
  () => {
    console.log('水果改变了')
    localStorage.setItem('fruits', JSON.stringify(fruitList.value))
  },
  { deep: true }
)

</script>

<template>
  <div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box"><img src="https://hongm-1312445828.cos.ap-nanjing.myqcloud.com/sg_top.png" alt="" /></div>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <!-- 购物车主体 -->
    <div v-if="fruitList.length>0" class="main">
      <div class="table">
        <!-- 头部 -->
        <div class="thead">
          <div class="tr">
            <div class="th">选中</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">小计</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody">
          <div v-for="item in fruitList" :key="item.id" class="tr active">
            <div class="td">
              <input v-model="item.isChecked" type="checkbox" checked />
            </div>
            <div class="td">
              <img :src="item.icon" alt="" />
            </div>
            <div class="td">{{item.price}}</div>
            <div class="td">
              <div class="my-input-number">
                <button @click="decreaseNum(item.id)" class="decrease"> - </button>
                <span class="my-input__inner">{{item.num}}</span>
                <button @click="addNum(item.id)" class="increase"> + </button>
              </div>
            </div>
            <div class="td">{{item.num*item.price}}</div>
            <div class="td"><button @click="deleteItem(item.id)">删除</button></div>
          </div>

        
        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <!-- 全选 -->
        <label class="check-all">
           <!-- v-model ：取值，也会对绑定的属性赋值
              当我们在点击 checkbox 的时候
              最新的选中状态赋值给  isCheckAll（计算属性）
              不实现 set 警告
          
          -->
          <input v-model="isCheckAll" type="checkbox" />
          全选
        </label>
        <div class="right-box">
          <!-- 所有商品总价 -->
          <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{totalPrice}}</span></span>
          <!-- 结算按钮 -->
          <button class="pay">结算( {{totalCount}} )</button>
        </div>
      </div>
    </div>
    <!-- 空车 -->
    <div v-else class="empty">🛒空空如也</div>
  </div>
</template>

<style scoped>
@import './style/inputnumber.css';
@import './style/index.css';
</style>